<template>
	<view class="myIndex">
		<view class="current"></view>
		<view class="index-top">
			<view class="search" :style="{height: statusBarHeight+'px'}">
				<view class="left" @click="back"></view>
				<!-- <u-search placeholder="请输入搜索内容" v-model="keyword"></u-search> -->
				<input type="search" name="" id="" class="topSearch" placeholder="请输入项目名称" placeholder-style="color: #F5F5F5" v-model="form.search">
				<image src="../../static/Vector.png" mode="" class="searchBtn" @click="List" v-if="cl"></image>
				<u-icon name="close-circle" color="#fff;" v-if="!cl" size="18"
					@click="closeSearch">
				</u-icon>
			</view>
			<view class="" style="display: flex;">
				<view class="selectTop">
					<view class="item">
						<vvSelect placeholder="请选择主体" class="select" :list="subject_list" label="name" valueKey="subject_id" :fontSize="13"
							ref="vvSelect2" @change="pickerChange2"></vvSelect>
						<view class="arrow">
							<image src="../../static/selectBot.png" mode="" v-if="form.subject_id == ''"></image>
							<u-icon name="close-circle" color="#505050;" v-if="form.subject_id" size="16"
								@click="closeSel2">
							</u-icon>
						</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<vvSelect placeholder="请选择区域" class="select" :list="areaList1" label="name" valueKey="id" :fontSize="13"
							ref="vvSelect1" @change="pickerChange"></vvSelect>
						<view class="arrow">
							<image src="../../static/selectBot.png" mode="" v-if="form.area_id == ''"></image>
							<u-icon name="close-circle" color="#505050;" v-if="form.area_id" size="16" @click="closeSel1">
							</u-icon>
						</view>
					</view>
					<!-- <view class="item">
						<vvSelect placeholder="是否立项" class="select" :list="is_lx" label="name" valueKey="is_lx"
							ref="vvSelect3" @change="pickerChange3"></vvSelect>
						<view class="arrow">
							<image src="../../static/selectBot.png" mode="" v-if="form.is_lx == ''"></image>
							<u-icon name="close-circle" color="#505050;" v-if="form.is_lx" size="16" @click="closeSel3">
							</u-icon>
						</view>
					</view> -->
				</view>
				<view class="select_icon" @click="getState">
					<image src="/static/my/state.png" mode="" ></image>
					<view>数据统计</view>
				</view>
			</view>
			
		</view>
		<view class="index">
			<scroll-view enable-back-to-top=true scroll-y="true" class="scrollHight"  :style="{height:height}"  @scrolltoupper="upper"
				@scrolltolower="lower" :refresher-enabled="true" :refresher-threshold="100"
				:refresher-triggered="isTriggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				@refresherpulling="onPulling">
				<list v-for="item in projectListData" :id="item.id" :item="item" :key="item.id"
					style="position: relative;">
					<text slot="topDetail" @click="goDetail(item.id,item)">查看详情</text>
					<text slot="timeValue"></text>
					<text slot="update"></text>
					<text slot="topDetail"></text>
					<text slot="botTime">{{item.upload_time.substring(0,10)}}</text>
					<text slot="topTime"></text>
				</list>
				<view class="noMore" v-if="last_page==form.page&&projectListData.length!=0"
					style="text-align: center;color: #797575;margin-top: 20rpx;padding-bottom: 60rpx;">
					数据加载完成...
				</view>
				<u-empty text="暂无列表哦~~" mode="list" v-if="projectListData.length==0" margin-top='50'></u-empty>
			</scroll-view>
			<view class="showEvaluate">
				<centerShow :showPop="showCenter" @refuse="refuse" @submit="subTel" :tip='tip' :showqx="true">
				</centerShow>
			</view>
		</view>
		<view class="state-pop">
			<view  class="state-popT">数据统计展示</view>
		</view>
		<u-popup :show="show" @close="close"  :round="10" closeable="true">
			<view class="state-pop">
				<view  class="state-popT">数据统计展示</view>
				<view class="" style="height: 2rpx;background: rgba(217, 217, 217, 0.6);width: 100%;"></view>
				<view class="state-list" v-for="(i,index) in stateShow" :key="index">
					<view class="list-title">
						{{i.title}}
					</view>
					<view class="list-count">
						{{i.count}}
					</view>
				</view>
			</view>
		</u-popup>
	<!-- <m-tabbar native>
			<template v-slot:tabbar_index_1>
				<view class="custom_style">
					<view class="custom_style_icon"></view>
				</view>
			</template>
		</m-tabbar> -->
	</view>
</template>

<script>
	import {
		mapActions,
		mapMutations
	} from 'vuex'
	import debounce from '../../utils/debounce'
	import {
		areaList,
		projectList,
		projectPemind,
		dataOverview,
		dataStatistics,
	} from '@/request/api.js'
	const debounceGetSearch = debounce(projectList, 100)
	import centerShow from '@/components/common/centerShow.vue'
	// import vvSelectArea from '@/components/vv-select-area/vv-select-area'
	import vvSelect from '@/components/vv-select/vv-select.vue'
	import list from '@/components/common/list.vue'
	export default {
		components: {
			vvSelect,
			list,
			centerShow
		},
		data() {
			return {
				show: false,
				stateShow:[{
					id: 3,
					title: '项目数量(单位.个):',
				},{
					id: 2,
					title: '装机量(单位.兆瓦):',
				},{
					id: 1,
					title: '已获取备案数量(单位.个):',
				},{
					id: 4,
					title: '已获取备案接入批复(单位.个):',
				},{
					id: 5,
					title: '已支付数量(单位.个):',
				},{
					id: 6,
					title: '付款总金额(单位.元):',
				},{
					id: 7,
					title: '建设中数量(单位.个):',
				},{
					id: 8,
					title: '已暂停数量(单位.个):',
				}],
				areaList1:[],
				height: 0,
				tip: '',
				showCenter: false,
				form: {
					is_lx: "",
					area_id:'',
					subject_id: '',
					type_id: '',
					search: '',
					page: 1
				},
				type_list: [],
				cl: true,
				subject_list: [],
				is_lx: [],
				projectListData: [],
				last_page: 1,
				statusBarHeight: 50,
				isTriggered: false, //定义一个用来表示下拉刷新是否被触发，当更新完数据需要重新定义为false
			}
		},
		onReachBottom() {
			console.log(111)
			if (this.form.page < this.last_page) {
				this.form.page = this.form.page + 1
				this.projectList()
			}
		},
		onPullDownRefresh() {
			// console.log(111)
			this.closeSel()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		created() {
			// this.typeList()
			this.areaList()
			let systemInfo = uni.getSystemInfoSync()
						this.statusBarHeight = systemInfo.statusBarHeight
			// console.log(uni.getSystemInfoSync(),'uni.getSystemInfoSync()')
		},
		onReady() {
			this.height = uni.getSystemInfoSync().windowHeight - 136 + 'px';
			// console.log(this.height,'hekg')
			// console.log(uni.getSystemInfoSync(),'uni.getSystemInfoSync()')
		},
		onLoad(options) {
			this.form.type_id = options.id
		},
		onShareAppMessage() {
			return {
				title: '瑞能电力',
				path: '/pages/index/index',
			}
		},
		onShareTimeline: function() {
			return {
				title: '瑞能电力',
				path: '/pages/index/index',
			}
		},
		onShow() {
			this.projectListData = []
			this.form.page = 1
			this.typeList()
			this.projectList()
			this.getProjectPemind()
		},
		methods: {
			...mapActions(['getSearchList']),
			...mapMutations(['searchList']),
			async areaList(){
				let res = await areaList()
				this.areaList1 = res.data
				// console.log(this.areaList1,2222)
			},
			getState(){
				this.show = true
				this.dataStatistics()
			},
			onPulling(e) {
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				this.isTriggered = true;
				// console.log("onpulling", e);
			},
			async dataStatistics() {
				let res = await dataStatistics({
					type_id:this.form.type_id,
					area_id:this.form.area_id,
					subject_id:this.form.subject_id,
					search:this.form.search
				})
				var keys = Object.keys(res.data)
				this.stateShow = this.stateShow.map((item,index) => {
					return {
						...item,
						count: res.data[keys[index]]
					}
				})
			},
			async dataOverview() {
				let res = await dataOverview({
					type_id:this.form.type_id,
					area_id:this.form.area_id,
					subject_id:this.form.subject_id,
					search:this.form.search
				})
				var keys = Object.keys(res.data)
				this.stateShow = this.stateShow.map((item,index) => {
					return {
						...item,
						count: res.data[keys[index]]
					}
				})
			},
			close() {
				this.show = false
				// console.log('close');
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			onRefresh() {
				// console.log("自定义下拉刷新被触发");
				this.closeSel()
				this.isTriggered = false;
			},
			onRestore() {
				// console.log("自定义下拉刷新被复位");
			},
			upper: function(e) {
				// console.log('到达顶部吧')
			},
			lower: function(e) {
				// console.log('到达底部吧')
				if (this.form.page < this.last_page) {
					this.form.page = this.form.page + 1
					
					this.projectList()
				}
			},
			async getProjectPemind() {
				let res = await projectPemind()
				if (res.data) {
					this.tip = res.msg;
					this.showCenter = true
				}
			},
			refuse() {
				this.showCenter = false
			},
			async subTel() {
				this.showCenter = false
			},
			closeSel1() {
				// this.form.type_id = ''
				this.form.area_id = ''
				this.$refs.vvSelect1.emptCheckLabels()
				this.form.page = 1
				this.projectListData = []
				this.projectList()
			},
			closeSearch() {
				this.form.search = ''
				this.form.page = 1
				this.projectListData = []
				this.projectList()
				this.cl = true
			},
			closeSel2() {
				this.form.subject_id = ''
				this.$refs.vvSelect2.emptCheckLabels()
				this.form.page = 1
				this.projectListData = []
				this.projectList()
			},
			closeSel3() {
				this.form.is_lx = ''
				// this.$refs.vvSelect3.emptCheckLabels()
				this.form.page = 1
				this.projectListData = []
				this.projectList()
			},
			closeSel() {
				this.form.page = 1
				this.projectListData = []
				// this.$refs.vvSelect.emptCheckLabels()
				// this.$refs.vvSelect1.emptCheckLabels()
				// this.$refs.vvSelect2.emptCheckLabels()
				// this.$refs.vvSelect3.emptCheckLabels()
				// this.form.is_lx = ''
				// this.form.subject_id = ''
				// this.form.search = ''
				// this.form.type_id = ''
				this.projectList()
			},
			List() {
				this.page = 1
				this.projectListData = []
				this.form.page = 1
				this.projectList()
				this.cl = false
			},
			goDetail(id, item) {
				let userInfo = uni.getStorageSync('userInfo')
				let per = false; //默认没有权限
				// for(lek i = 0;i<userInfo.user_per.length;i++){
				// 	if(userInfo.user_per[i]==2||userInfo.user_per[i]==3||userInfo.user_per[i]==4){
				// 		per = true;
				// 		uni.showToast({
				// 			title: '您没查看该项目的权限！',
				// 			duration: 1500,
				// 			icon: 'none'
				// 		})
				// 		return false
				// 	}
				// }
				uni.navigateTo({
					url: `/pages/my/ProjectDetails/ProjectDetails?id=${id}&item=${JSON.stringify(item)}`
				})
			},
			async projectList() {
				// let res = await projectList(this.form)
				// this.projectListData = this.projectListData.concat(res.data.list)
				// this.last_page = Math.ceil(res.data.total / 10)
                // 4.根据关键字进行搜索 防抖函数处理
                debounceGetSearch(this.form).then(res => {
					// console.log(res)
					this.projectListData = this.projectListData.concat(res.data.list)
					// console.log(this.projectListData,'this.projectListData')
					this.last_page = Math.ceil(res.data.total / 10)
                })
			},
			async typeList() {
				let res = await this.getSearchList()
				let searchList = this.$store.state.searchList
				let arr1 = []
				let arr2 = []
				let arr3 = []
				for (let k in searchList.type_list) {
					arr1.push({
						name: searchList.type_list[k],
						type_id: k
					})
				}
				for (let k in searchList.subject_list) {
					arr2.push({
						name: searchList.subject_list[k],
						subject_id: k
					})
				}
				for (let k in searchList.is_lx) {
					arr3.push({
						name: searchList.is_lx[k],
						is_lx: k
					})
				}
				this.type_list = arr1
				this.subject_list = arr2
				this.is_lx = arr3
				// this.$nextTick(function(){
				// 	this.type_list= arr1
				// 	this.subject_list=arr2
				// 	this.is_lx=arr3
				// 	this.$forceUpdate()
				// })
				// console.log(this.type_list)
			},
			pickerChange2(val) {
				this.form.subject_id = val
				this.projectListData = []
				this.form.page = 1
				this.projectList()
			},
			pickerChange3(val) {
				this.form.is_lx = val
				this.projectListData = []
				this.form.page = 1
				this.projectList()
			},
			getList() {

			},
			selectTab(e) {

			},
			pickerChange(e) {
				this.form.area_id = e
				this.projectListData = []
				this.projectList()
			},
			clearInput() {

			},
			Input() {

			},
			goDetails(item) {
				uni.navigateTo({
					url: '/components/listDetail/Detail?type=1&data=' + JSON.stringify(item)
				})
			}
		}
	}
</script>
<style>
	/* @page{
		background-color: #E2E2E2;
	} */
	page {
		background-color: #f6f6f64d;
		overflow-x: hidden;
	}.
	::v-deep .bx{
		position: absolute;
		height: 40rpx;
		width: 40rpx;
		padding: 8rpx;
		// right: 25rpx;
		// top: 16rpx;
		right: 36rpx;
		bottom: 6rpx;
	}
</style>
<style lang="scss" scoped>
	::v-deep .search .u-search__action {
		color: #00C777
	}
	::v-deep .search .u-icon {
		position: absolute;
		height: 40rpx;
		width: 40rpx;
		padding: 8rpx;
		color: #fff !important;
		right: 36rpx;
		bottom: 6rpx;
	}
	@page {
		background-color: #E2E2E2;
	}	
	::v-deep .u-popup__content{
		margin: 40rpx;
		overflow: hidden;
		border-radius:50rpx !important;
	}
	.state-pop{
		height: 700rpx;
		margin: 30rpx;
		text-align: center;
		
		.state-list{
			display: flex;
			line-height: 60rpx;
			margin-top: 30rpx;
			height: 50rpx;
			justify-content: space-between;
			.list-title{
				color:#47578E;
				font-weight: 500;
				font-size: 28rpx;
			}
			.list-count{
				color: #979797;
			}
		}
	}
	.state-popT{
		height: 60rpx;
		color:#505050;
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 20rpx;
	}
	.left {
		width: 46rpx;
		// height: 100%;
		min-height: 28px;
		margin-right: 30rpx;
		// position: fixed;
		// top: 100rpx;
		// left: 30rpx;
		background: url(../../static/my/left_2.png);
		background-repeat:no-repeat;
		background-position: center;
		height: 64rpx;
	}

	.scrollHight {
		height: 100%;
		z-index: 10;
		overflow: hidden;
	}

	.blue {
		color: #00C777
	}

	.myIndex {
		overflow-x: hidden;
		height: 100vh;
		background: #fff;
	}

	.index {
		top: 17%;
		position: absolute;
		// padding-bottom: 50px;
		overflow: scroll;
		z-index: 0;
		width: 100%;
	}

	.current {
		background: url(../../static/my/bgAll.png);
		// background: url(../../static/selectBot.png);
		background-size: 100% 100%;
		height: 932px;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		overflow: hidden;
		left: 0;
		width: 100%;
		z-index: 0;
	}

	.custom_style {
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;

		&_icon {
			// background-color: #15357A;
			background-image: url(../../static/tabble/tab2.png);
			font-size: 65rpx;
			width: 90rpx;
			height: 90rpx;
			border-radius: 100%;
			display: flex;
			background-repeat: no-repeat;
			background-size: 100%;
			justify-content: center;
			align-items: center;
			margin-top: -40rpx;
		}
	}

	.myIndex {
		// padding: 0 20rpx;
		font-size: 28rpx;

		.index-top {
			position: fixed;
			width: 100%;
			top: 4.6%;
		}

		.search {
			position: relative;
			// margin: 15rpx 0;
			// margin-top: 90rpx;
			padding: 0 20rpx;
			width: 64%;
			margin-left: 20rpx;
			height: 64rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			min-height: 28px;
		}

		.topSearch {
			// border: 1px solid #ccc;
			border-radius: 80px;
			height: 64rpx;
			line-height: 64rpx;
			display: inherit;
			padding: 0 20rpx;
			color: #F5F5F5;
			padding-right: 80rpx;
			background: rgba(255, 255, 255, 0.2);
			width: 100%;
		}
		.select_icon{
			width:80rpx;
			height: 70rpx;
			margin: 30rpx auto;
			// border: 1px solid gray;
			text-align: center;
			image{
				width: 27rpx;
				height: 25rpx;
				margin: 12rpx 10rpx 1rpx 10rpx;
			}
			view{
				font-size: 20rpx;
				color: #fff;
			}
		}

		.selectTop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;
			margin-left: 30rpx;
			padding: 20rpx 40rpx;
			// background: #fff;
			// border-bottom: 1px solid #E2E2E2;
			color: #979797;
			font-size: 24rpx;
			position: relative;
			width: 68%;
			background: #fff;
			height: 34rpx;
			height: 34rpx;
			border-radius: 20rpx;
			.line{
				width: 2rpx;
				height: 34rpx;
				line-height: 34rpx;
				background: gainsboro;
			}
			
			.item {
				width: 35%;
				display: flex;
				// background: #F5F5F5;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 60px;
				padding: 15rpx;

				.select {
					flex: 1;
				}

				.arrow {
					width: 20rpx;
					height: 14rpx;
					margin-right: 8rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.searchBtn {
			position: absolute;
			height: 40rpx;
			width: 40rpx;
			padding: 8rpx;
			// right: 25rpx;
			// top: 16rpx;
			right: 36rpx;
			bottom: 6rpx;
		}
		

		.list {
			color: #505050;
			padding: 20rpx;
			background: #fff;
			margin-top: 20rpx;

			.content {
				display: flex;
				justify-content: center;
				align-items: center;

				.avatar {
					width: 90rpx;
					height: 90rpx;
					border-radius: 20rpx;

					.image {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
				}

				.center {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: left;
					justify-content: center;

					.top {
						font-size: 26rpx;
						font-size: 26rpx;
						margin: 10px 0;
					}

					.bottom {
						font-size: 28rpx;
					}
				}

				.right {
					width: 100rpx;
					color: #157DFA;
					font-size: 24rpx;
				}
			}

			.bottom {
				display: flex;
				align-items: center;
				font-size: 22rpx;
				padding: 10rpx 0;

				.time {
					flex: 1;
					color: #BABABA;

					.timeValue {}
				}
				
			}
		}
	}
</style>
